<template>
  <div class="box">
    <van-form @submit="onLogin">
      <van-icon name="../../public/images/医疗.png" />
      <van-cell-group inset>
        <van-field
          v-model="user.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="user.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px" class="login_btn">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
      <van-button plain type="primary" class="backStart" @click="backStart"
        >返回</van-button
      >
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import { LoginReq } from "../hooks/index";
const { user, onLogin, backStart } = LoginReq();
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../public/images/login.png) no-repeat;
  background-size: cover;

  //   background-color: aquamarine;
  .van-form {
    width: 450px;
    // background: rgba(240, 230, 230, 0.3);
    text-align: center;
    margin-top: 50%;
    border-radius: 8px;
    padding: 30px 25px;
    .van-icon {
      font-size: 66px;
      margin-bottom: 35px;
    }
    .van-field {
      background-color: rgba(252, 248, 248, 0.2);
    }

    .login_btn {
      display: flex;
    }
    .backStart {
      width: 70px;
      height: 30px;
      border: none;
      //   background: rgba(225, 212, 212, 0.5);
      margin-top: 8%;
      margin-left: -90%;
    }
  }
}
</style>
